<template>
<p>适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。</p>
<div text="sm" m="y-4" data-v-72294632=""><p>在 <code>el-checkbox</code> 元素中定义 <code>v-model</code> 绑定变量，单一的 <code>checkbox</code> 中，默认绑定变量的值会是 <code>Boolean</code>，选中为 <code>true</code>。 在 <code>el-checkbox</code> 组件中，<code>value</code> 是选择框的值。 如果该组件下没有被传入内容，那么 <code>label</code> 将会作为 checkbox 按钮后的介绍。 <code>value</code> 也与数组中的元素值相对应。 如果指定的值存在于数组中，就处于选择状态，反之亦然。</p>
</div>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="Option A" value="Value A" />
    <el-checkbox label="Option B" value="Value B" />
    <el-checkbox label="Option C" value="Value C" />
    <el-checkbox label="disabled" value="Value disabled" disabled />
    <el-checkbox
      label="selected and disabled"
      value="Value selected and disabled"
      disabled
    />
  </el-checkbox-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkList = ref(['Value selected and disabled', 'Value A'])
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>